{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "820fe530",
   "metadata": {},
   "source": [
    "# 使用python的streamlit库完成ppt演示文稿的制作\n",
    "\n",
    "\n",
    "## 使用chatgpt学习streamlit\n",
    "\n",
    "\n",
    "通过下面链接注册账号，问一个有关streamlit的问题，比如：请用streamlit与echarts完成一个饼图，然后运行此代码，如果chartgpt有错误请通过学过的知识自行改正\n",
    "\n",
    "chatgpt的使用方法：\n",
    "\n",
    "https://www.bilibili.com/video/BV1KM41157qx/?vd_source=09af776e3fe3bbe20ff8249e4a9b1581\n",
    "\n",
    "https://linchat.fun/"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "711d9170",
   "metadata": {},
   "source": [
    "## 用streamlit做带图表的多页演示文稿\n",
    "\n",
    "\n",
    "### chatgpt对于此问题的回答\n",
    "\n",
    "* 这也是我问chatgpt的第二个问题，它的答案如下：\n",
    "\n",
    "好的，我可以为您提供一个使用 Streamlit 制作带有图表的多页演示文稿的示例。在本示例中，我们将使用 streamlit 和 pyecharts 库来创建一个实时显示数据图表的演示文稿。假设您已经安装并配置好了 streamlit 和 pyecharts，接下来将提供代码示例：\n",
    "\n",
    "首先，我们需要导入必要的模块和数据："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "46278331",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Line, Pie, Bar\n",
    "from pyecharts.faker import Faker\n",
    "\n",
    "st.set_page_config(page_title='My Streamlit Presentation', page_icon=':books:')\n",
    "\n",
    "# 假数据\n",
    "dates = pd.date_range('20220101', periods=7)\n",
    "df = pd.DataFrame(np.random.randn(7, 4), index=dates, columns=list('ABCD'))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "346ad780",
   "metadata": {},
   "source": [
    "然后，我们设置每个页面的内容："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d501570f",
   "metadata": {},
   "outputs": [],
   "source": [
    "# 第一页 -- 简介，欢迎词\n",
    "def introduction():\n",
    "    st.title('My Awesome Presentation')\n",
    "    st.write('欢迎来到我的演示文稿！在这里，您将看到一些数据可视化和一些非常酷的图表！')\n",
    "\n",
    "# 第二页 -- 数据概述，简要数据的展示\n",
    "def data_overview_h():\n",
    "    st.header('数据概述')\n",
    "    st.table(df.head())\n",
    "\n",
    "def data_overview_c():\n",
    "    st.header('数据概述')\n",
    "    st.table(df.describe())\n",
    "\n",
    "# 第三页 -- 绘制折线图\n",
    "def line_chart():\n",
    "    st.header('绘制折线图')\n",
    "    c = (\n",
    "        Line()\n",
    "        .add_xaxis(list(df.index))\n",
    "        .add_yaxis('A', list(df['A']))\n",
    "        .add_yaxis('B', list(df['B']))\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title='折线图'))\n",
    "    )\n",
    "    st.pyplot(c.render())\n",
    "\n",
    "\n",
    "# 第四页 -- 绘制柱状图\n",
    "def bar_chart():\n",
    "    st.header('绘制柱状图')\n",
    "    c = (\n",
    "        Bar()\n",
    "        .add_xaxis(list(df.index))\n",
    "        .add_yaxis('A', list(df['A']))\n",
    "        .add_yaxis('B', list(df['B']))\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title='柱状图'))\n",
    "    )\n",
    "    st.pyplot(c.render())\n",
    "\n",
    "# 第五页 -- 绘制饼图\n",
    "def pie_chart():\n",
    "    st.header('绘制饼图')\n",
    "    c = (\n",
    "        Pie()\n",
    "        .add(\"\", [list(z) for z in zip(Faker.choose(), Faker.values())])\n",
    "        .set_global_opts(title_opts=opts.TitleOpts(title=\"饼图\"))\n",
    "        .set_series_opts(label_opts=opts.LabelOpts(formatter=\"{b}: {c}\"))\n",
    "    )\n",
    "    st.pyplot(c.render())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0fd08dbd",
   "metadata": {},
   "source": [
    "最后，我们使用 streamlit 的多页面应用程序构建 API，使用菜单栏进行导航："
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "091f2d4f",
   "metadata": {},
   "outputs": [],
   "source": [
    "def main():\n",
    "    st.sidebar.title('页面导航：')\n",
    "\n",
    "    # 设置菜单项列表\n",
    "    menu = ['Introduction', 'Data Overview (Head)', 'Data Overview (Describe)', 'Line Chart', 'Bar Chart', 'Pie Chart']\n",
    "    choice = st.sidebar.selectbox('选择一个页面', menu)\n",
    "\n",
    "    # 显示选定页面的内容\n",
    "    if choice == 'Introduction':\n",
    "        introduction()\n",
    "    elif choice == 'Data Overview (Head)':\n",
    "        data_overview_h()\n",
    "    elif choice == 'Data Overview (Describe)':\n",
    "        data_overview_c()\n",
    "    elif choice == 'Line Chart':\n",
    "        line_chart()\n",
    "    elif choice == 'Bar Chart':\n",
    "        bar_chart()\n",
    "    elif choice == 'Pie Chart':\n",
    "        pie_chart()\n",
    "    else:\n",
    "        introduction()\n",
    "\n",
    "if __name__ == '__main__':\n",
    "    main()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "83bfbbfe",
   "metadata": {},
   "source": [
    "在运行此应用程序后，您将在浏览器中看到一个带有菜单栏的应用程序，可以浏览多个页面，并查看相应的可视化数据图表。"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1f582d46",
   "metadata": {},
   "source": [
    "* 尝试运行此程序，可见还是有问题，但是对于初学者已经很有启发性了！\n",
    "\n",
    "* chartgpt像是一个知识非常渊博的文科生，有很强的的联想与资源整合能力，很多时候基于统计规律的联想是有效果的，但是统计规律终究不能代替逻辑推理。"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "aa76bdd2",
   "metadata": {},
   "source": [
    "### 设置宽屏与ppt的背景\n",
    "\n",
    "https://www.w3school.com.cn/css/css_selectors.asp\n",
    "\n",
    "CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。\n",
    "\n",
    "我们可以将 CSS 选择器分为五类：\n",
    "\n",
    "* 简单选择器（根据名称、id、类来选取元素）\n",
    "* 组合器选择器（根据它们之间的特定关系来选取元素）\n",
    "* 伪类选择器（根据特定状态选取元素）\n",
    "* 伪元素选择器（选取元素的一部分并设置其样式）\n",
    "* 属性选择器（根据属性或属性值来选取元素）\n",
    "\n",
    "classwork1\n",
    "\n",
    "* 设置宽屏\n",
    "\n",
    "* 设置背景\n",
    "\n",
    "* 去掉streamlit的logo"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7e3a1986",
   "metadata": {},
   "outputs": [],
   "source": [
    "layout=\"wide\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f14160ca",
   "metadata": {},
   "outputs": [],
   "source": [
    "hide_streamlit_style = \"\"\"\n",
    "            <style>\n",
    "            #MainMenu {visibility: hidden;}\n",
    "            footer {visibility: hidden;}\n",
    "            [data-testid=\"stAppViewContainer\"]{ \n",
    "              width: 100%;\n",
    "              height: 100%;\n",
    "              background-size: cover;\n",
    "              background-position: center center;\n",
    "              background-repeat: repeat;\n",
    "              background-image: url(\"data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 2000 1125%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill=%22%23d0dce1%22 d=%22M0 0h2000v1125H0z%22%2F%3E%3Crect x=%221817%22 y=%22907%22 width=%228.625%22 height=%2222.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.95801 .03568 -.59373 -1.02172 4560.877 2178.718)%22%2F%3E%3Crect x=%22894%22 y=%2256%22 width=%227.625%22 height=%2221.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.94982 .12375 -.3452 1.00786 72.911 -269.937)%22%2F%3E%3Crect x=%2224%22 y=%22951%22 width=%225.625%22 height=%228.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.99954 .19186 -.06993 -.98703 103.789 1890.276)%22%2F%3E%3Crect x=%221961%22 y=%221055%22 width=%2210.625%22 height=%2210.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.24108 1.01624 -.96717 .07106 2492.592 -631.059)%22%2F%3E%3Crect x=%221920%22 y=%22254%22 width=%227.625%22 height=%2211.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(-.35214 .9106 -.89488 -.52573 2693.602 -730.322)%22%2F%3E%3Crect x=%221844%22 y=%22913%22 width=%226.625%22 height=%2215.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.97201 .17431 -.2243 .98857 284.748 -473.101)%22%2F%3E%3Crect x=%22107%22 y=%22478%22 width=%226.625%22 height=%226.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.75753 .58787 -.6584 .80914 310.12 25.088)%22%2F%3E%3Crect x=%221254%22 y=%221070%22 width=%228.625%22 height=%229.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.03873 .97874 -1.02995 -.20804 2612.18 22.908)%22%2F%3E%3Crect x=%22773%22 y=%22524%22 width=%226.625%22 height=%2210.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.99237 .01752 -.22776 1.00367 69.829 -83.46)%22%2F%3E%3Crect x=%22599%22 y=%22233%22 width=%228.625%22 height=%2211.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(-.12397 .87253 -1.07452 -.50375 1030.375 -93.215)%22%2F%3E%3Crect x=%22342%22 y=%221002%22 width=%227.625%22 height=%2217.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.39822 .99451 -.87613 .32314 896.831 445.993)%22%2F%3E%3Crect x=%221396%22 y=%221044%22 width=%2210.625%22 height=%2220.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.17633 1 -.9689 .17633 2318.091 -779.993)%22%2F%3E%3Crect x=%221147%22 y=%22303%22 width=%229.625%22 height=%2219.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.9336 .36284 -.32397 -.94522 2344.492 8.141)%22%2F%3E%3Crect x=%221047%22 y=%22305%22 width=%227.625%22 height=%2213.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.94437 .17375 -.39946 -.9854 2235.47 473.187)%22%2F%3E%3Crect x=%221138%22 y=%22132%22 width=%226.625%22 height=%228.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.8642 .8215 -.58942 -.59685 2219.42 -921.158)%22%2F%3E%3Crect x=%221866%22 y=%22325%22 width=%229.625%22 height=%2212.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(1.06992 .7257 -.30805 .7257 204.596 -834.873)%22%2F%3E%3Crect x=%22144%22 y=%22591%22 width=%226.625%22 height=%2216.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.19408 1.00168 -1.0153 -.08764 835.61 519.757)%22%2F%3E%3Crect x=%22379%22 y=%22352%22 width=%2210.625%22 height=%2226.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.78056 .42767 -.5851 -.96056 855.148 676.729)%22%2F%3E%3Crect x=%221665%22 y=%221013%22 width=%2210.625%22 height=%2215.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.82716 .70357 -.50268 .78139 609.863 -409.296)%22%2F%3E%3Crect x=%221920%22 y=%22953%22 width=%226.625%22 height=%228.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.80693 .47532 -.58621 .89395 943.91 -1117.3)%22%2F%3E%3Crect x=%22893%22 y=%22310%22 width=%225.625%22 height=%226.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.9475 .01825 -.51225 -1.04553 2019.235 898.42)%22%2F%3E%3Crect x=%221812%22 y=%22635%22 width=%228.625%22 height=%2215.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.04621 .9977 -1.0088 -.14022 2509.192 -1302.212)%22%2F%3E%3Crect x=%221760%22 y=%22246%22 width=%225.625%22 height=%227.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(-.39848 .83342 -.88855 -.65114 2612.274 -449.697)%22%2F%3E%3Crect x=%221917%22 y=%22839%22 width=%225.625%22 height=%2215.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(-.68683 .41301 -.8786 -.92764 4390.545 1177.959)%22%2F%3E%3Crect x=%22779%22 y=%22680%22 width=%228.625%22 height=%228.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.64119 .78011 -.76264 -.63172 1728.32 574.067)%22%2F%3E%3Crect x=%22294%22 y=%22706%22 width=%228.625%22 height=%2211.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.98296 -.07378 -.5024 -1.05504 1137.201 1587.532)%22%2F%3E%3Crect x=%221900%22 y=%22362%22 width=%226.625%22 height=%2212.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(-.50536 .73469 -.8378 -.76079 3102.172 -94.452)%22%2F%3E%3Crect x=%221008%22 y=%22967%22 width=%229.625%22 height=%2220.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.5454 .78993 -.83981 .61716 1265.354 -496.73)%22%2F%3E%3Crect x=%221886%22 y=%22532%22 width=%227.625%22 height=%2213.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.48372 .85129 -.87243 .53194 1458.795 -1521.916)%22%2F%3E%3Crect x=%22216%22 y=%22211%22 width=%228.625%22 height=%229.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.25997 .89763 -.96995 -.49756 491.568 176.298)%22%2F%3E%3Crect x=%22497%22 y=%22885%22 width=%225.625%22 height=%2214.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.95244 .41744 -.25637 .93758 182.07 -37.546)%22%2F%3E%3Crect x=%221787%22 y=%22122%22 width=%225.625%22 height=%2215.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.28409 1.01314 -1.0169 -.10648 1506.21 -1321.784)%22%2F%3E%3Crect x=%221961%22 y=%22667%22 width=%2210.625%22 height=%2220.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.74314 .6821 -.66913 -.73147 3880.778 -202.805)%22%2F%3E%3Crect x=%221525%22 y=%22366%22 width=%226.625%22 height=%227.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.98236 .07014 -.20868 1.00306 96.828 -268.96)%22%2F%3E%3Crect x=%221741%22 y=%22775%22 width=%229.625%22 height=%2224.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.35687 .91311 -.92874 .4258 1884.02 -1356.404)%22%2F%3E%3Crect x=%22382%22 y=%22925%22 width=%227.625%22 height=%229.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.90897 .52146 -.40491 .86785 377.008 -17.205)%22%2F%3E%3Crect x=%22754%22 y=%22371%22 width=%227.625%22 height=%2214.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.65596 .75482 -.7546 .65616 539.361 -428.708)%22%2F%3E%3Crect x=%221453%22 y=%2267%22 width=%226.625%22 height=%2214.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.17596 1.03214 -1.00306 -.20063 1303.29 -940.718)%22%2F%3E%3Crect x=%221638%22 y=%2291%22 width=%227.625%22 height=%2211.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(-.34055 .93415 -.9329 -.37742 2265.136 -1198.753)%22%2F%3E%3Crect x=%22178%22 y=%22179%22 width=%229.625%22 height=%2220.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.97603 -.07044 .23823 1.00737 9.307 -14.21)%22%2F%3E%3Crect x=%22269%22 y=%22204%22 width=%228.625%22 height=%2221.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.80515 .49085 -.58474 .88552 184.853 -152.853)%22%2F%3E%3Crect x=%22475%22 y=%22960%22 width=%225.625%22 height=%2212.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.89836 .45965 -.41243 .90211 620.223 -200.715)%22%2F%3E%3Crect x=%221311%22 y=%22502%22 width=%225.625%22 height=%2215.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.97318 .3746 -.26076 .92718 230.774 -455.04)%22%2F%3E%3Crect x=%221036%22 y=%22575%22 width=%2210.625%22 height=%2219.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.98157 .37101 -.13828 .96651 69.898 -87.735)%22%2F%3E%3Crect x=%22304%22 y=%22973%22 width=%226.625%22 height=%2217.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(1.01661 .31592 -.03654 .9723 103.991 -4.572)%22%2F%3E%3Crect x=%22103%22 y=%22499%22 width=%225.625%22 height=%2212.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.83427 .7892 -.5419 .68604 281.977 107.494)%22%2F%3E%3Crect x=%221633%22 y=%221032%22 width=%225.625%22 height=%2215.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.80753 .7731 -.5664 .6961 824.715 -479.57)%22%2F%3E%3Crect x=%22284%22 y=%22588%22 width=%228.625%22 height=%2217.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.91787 .77456 -.49316 .67332 411.231 38.215)%22%2F%3E%3Crect x=%221210%22 y=%22389%22 width=%228.625%22 height=%2210.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.27436 .94276 -.9554 .36189 1269.604 -1063.845)%22%2F%3E%3Crect x=%221481%22 y=%22253%22 width=%229.625%22 height=%2214.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.78335 .46954 -.65646 -.88308 2876.25 -181.528)%22%2F%3E%3Crect x=%221692%22 y=%22452%22 width=%227.625%22 height=%2211.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(-.64173 .77904 -.76396 -.63086 3083.395 -455.902)%22%2F%3E%3Crect x=%221406%22 y=%22831%22 width=%229.625%22 height=%2212.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(-.9238 .19438 -.39206 -1 3061.789 1674.625)%22%2F%3E%3Crect x=%22239%22 y=%22127%22 width=%228.625%22 height=%2223.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.85228 .6355 -.52107 .78478 136.305 -158.947)%22%2F%3E%3Crect x=%221923%22 y=%22656%22 width=%2210.625%22 height=%2228.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.8388 .4098 -.5563 -.9204 4042.987 260.3)%22%2F%3E%3Crect x=%221565%22 y=%22956%22 width=%2210.625%22 height=%2229.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.53202 .7229 -.85129 -.7229 3254.965 871.212)%22%2F%3E%3Crect x=%22403%22 y=%22727%22 width=%229.625%22 height=%2218.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.90703 .68962 -.44273 .7659 393.162 -7.18)%22%2F%3E%3Crect x=%22514%22 y=%22257%22 width=%227.625%22 height=%2213.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.9868 .33869 -.08668 .98362 15.305 -22.576)%22%2F%3E%3Crect x=%2296%22 y=%22412%22 width=%2210.625%22 height=%2230.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.08982 .98769 -1.0267 -.15643 637.471 394.094)%22%2F%3E%3Crect x=%221943%22 y=%22138%22 width=%228.625%22 height=%2217.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.58717 .83448 -.7872 .58431 836.275 -1185.453)%22%2F%3E%3Crect x=%221926%22 y=%22497%22 width=%226.625%22 height=%227.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(1.01912 .2598 -.04558 .96962 87.44 -654.826)%22%2F%3E%3Crect x=%221417%22 y=%22832%22 width=%228.625%22 height=%229.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(-.40038 .87253 -.91494 -.50375 2908.905 -156.29)%22%2F%3E%3Crect x=%221549%22 y=%22944%22 width=%226.625%22 height=%2218.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.56121 1.02068 -.92075 .10728 1861.73 -374.995)%22%2F%3E%3Crect x=%221929%22 y=%22974%22 width=%227.625%22 height=%227.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(-.28156 .83974 -.97868 -.63279 3518.139 601.517)%22%2F%3E%3Crect x=%221513%22 y=%22288%22 width=%226.625%22 height=%229.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.8597 .26563 -.5562 -.99133 3039.007 530.382)%22%2F%3E%3Crect x=%221873%22 y=%22922%22 width=%229.625%22 height=%2217.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.85561 .64318 -.5351 .76651 873.935 -924.862)%22%2F%3E%3Crect x=%22826%22 y=%22724%22 width=%229.625%22 height=%2217.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.62589 .6617 -.73834 -.81714 1768.747 1051.816)%22%2F%3E%3Crect x=%22251%22 y=%22753%22 width=%225.625%22 height=%229.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.19438 1 -.96573 .17633 1074.92 325.623)%22%2F%3E%3Crect x=%221011%22 y=%22192%22 width=%227.625%22 height=%2211.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.36204 1.00076 -1.01188 -.03495 933.995 -757.677)%22%2F%3E%3Crect x=%22221%22 y=%22135%22 width=%229.625%22 height=%2222.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.528 1.0245 -.88299 .18065 254.24 -46.711)%22%2F%3E%3Crect x=%22898%22 y=%22277%22 width=%228.625%22 height=%228.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.30239 1.03852 -1.0108 -.16448 994.555 -316.304)%22%2F%3E%3Crect x=%221904%22 y=%2250%22 width=%225.625%22 height=%2214.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.6435 .90003 -.79722 .43897 753.179 -1584.098)%22%2F%3E%3Crect x=%221033%22 y=%221026%22 width=%2210.625%22 height=%2216.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.51745 .90223 -.85599 .44005 1552.752 -448.467)%22%2F%3E%3Crect x=%22178%22 y=%22751%22 width=%229.625%22 height=%2217.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.99564 .01755 .0554 1.00536 89.29 -26.491)%22%2F%3E%3Crect x=%221320%22 y=%22934%22 width=%227.625%22 height=%227.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.97015 .24196 -.24188 .97044 282.321 -315.697)%22%2F%3E%3Crect x=%22999%22 y=%22640%22 width=%2210.625%22 height=%2213.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.43814 .89934 -.89823 .43864 1166.628 -575.196)%22%2F%3E%3Crect x=%221343%22 y=%22175%22 width=%226.625%22 height=%228.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.43394 1.01757 -.8905 .21629 902.032 -843.385)%22%2F%3E%3Crect x=%22868%22 y=%22715%22 width=%226.625%22 height=%2212.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.8891 .64367 -.494 .7671 560.756 -347.177)%22%2F%3E%3Crect x=%221047%22 y=%22637%22 width=%2210.625%22 height=%2218.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.91079 .53121 -.42492 .85012 406.238 -388.548)%22%2F%3E%3Crect x=%22491%22 y=%22969%22 width=%226.625%22 height=%2210.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.98656 .20995 -.12152 .98776 70.342 -22.387)%22%2F%3E%3Crect x=%2246%22 y=%22230%22 width=%227.625%22 height=%2220.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.38435 1.0513 -.95791 -.01835 283.306 208.54)%22%2F%3E%3Crect x=%22248%22 y=%22270%22 width=%225.625%22 height=%226.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(-.91173 .71406 -.48872 -.71406 575.354 254.13)%22%2F%3E%3Crect x=%22196%22 y=%22222%22 width=%2210.625%22 height=%2218.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(-.95653 .07083 -.43882 -1.01295 547.24 486.859)%22%2F%3E%3Crect x=%22474%22 y=%221101%22 width=%229.625%22 height=%2211.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.72016 .65616 -.69557 .75482 825.876 -34.456)%22%2F%3E%3Crect x=%22627%22 y=%22320%22 width=%228.625%22 height=%2222.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.45101 1.04362 -1.01358 -.12814 816.141 -79.96)%22%2F%3E%3Crect x=%22893%22 y=%22789%22 width=%228.625%22 height=%228.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(.97015 .52298 -.2975 .87039 329.335 -208.238)%22%2F%3E%3Crect x=%22841%22 y=%22904%22 width=%2210.625%22 height=%2214.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(-.83578 .47532 -.53195 -.89395 2217.868 1189.669)%22%2F%3E%3Crect x=%221968%22 y=%221025%22 width=%227.625%22 height=%2218.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.65472 .75655 -.75265 .65766 1521.988 -1275.577)%22%2F%3E%3Crect x=%22362%22 y=%22985%22 width=%228.625%22 height=%2214.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.63982 .90554 -.79225 .44166 1027.123 267.31)%22%2F%3E%3Crect x=%22540%22 y=%22740%22 width=%227.625%22 height=%2216.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.85706 .65696 -.53623 -.75575 1335.504 928.083)%22%2F%3E%3Crect x=%221260%22 y=%22577%22 width=%225.625%22 height=%2213.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(1.04776 .51274 -.06007 .92502 99.824 -168.903)%22%2F%3E%3Crect x=%22602%22 y=%221084%22 width=%226.625%22 height=%2217.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(.95207 .50491 -.3315 .87454 718.725 -253.593)%22%2F%3E%3Crect x=%221311%22 y=%22332%22 width=%225.625%22 height=%229.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.882 .5163 -.46899 -.85926 2634.825 -143.964)%22%2F%3E%3Crect x=%22455%22 y=%22626%22 width=%228.625%22 height=%2221.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.74767 .46363 -.62394 -.95058 1130.51 1187.358)%22%2F%3E%3Crect x=%22581%22 y=%22123%22 width=%227.625%22 height=%2216.625%22 fill=%22%23889EAF%22 rx=%220%22 transform=%22matrix(.44853 1.00536 -.98684 .01755 514.73 -397.47)%22%2F%3E%3Crect x=%221974%22 y=%22165%22 width=%225.625%22 height=%2215.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.22029 1.05617 -.95836 -.05535 1662.236 -1224.803)%22%2F%3E%3Crect x=%22324%22 y=%22802%22 width=%225.625%22 height=%2211.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.2417 .9761 -.95519 .27989 1124.862 205.09)%22%2F%3E%3Crect x=%221826%22 y=%221112%22 width=%229.625%22 height=%2223.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(1.09853 .5308 -.05566 .8834 305.595 -384.305)%22%2F%3E%3Crect x=%221965%22 y=%22716%22 width=%226.625%22 height=%2210.625%22 fill=%22%23F3D5C0%22 rx=%220%22 transform=%22matrix(-.46835 .94276 -.88094 -.36189 3533.372 -1149.917)%22%2F%3E%3Crect x=%221164%22 y=%22749%22 width=%225.625%22 height=%225.625%22 fill=%22%23D4B499%22 rx=%220%22 transform=%22matrix(-.69772 .6887 -.7038 -.73854 2613.692 339.488)%22%2F%3E%3Crect x=%22536%22 y=%22719%22 width=%227.625%22 height=%2221.625%22 fill=%22%23506D84%22 rx=%220%22 transform=%22matrix(.31178 1.03512 -.96063 .01807 1103.124 302.499)%22%2F%3E%3C%2Fsvg%3E\");\n",
    "            }\n",
    "\n",
    "            [data-testid=\"stHeader\"]{\n",
    "                background-color:rgba(0, 0, 0, 0)\n",
    "                }\n",
    "            </style>\n",
    "            \"\"\"\n",
    "st.markdown(hide_streamlit_style, unsafe_allow_html=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "bafc4b02",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "2"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a=[1,2,4]\n",
    "a.index(4)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "170bed68",
   "metadata": {},
   "source": [
    "### 在ppt上显示表格与文字\n",
    "\n",
    "* classwork 2\n",
    "\n",
    "以上述代码为模板，修改第一二三页，使显示我们的男鞋数据\n",
    "\n",
    "* 第一页：通过st.columns改变首页文字及其位置\n",
    "\n",
    "* 第二页：显示数据字段与部分数据框展示\n",
    "\n",
    "* 第三页：显示数据部分字段的统计结果"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "1ec4d21a",
   "metadata": {},
   "outputs": [],
   "source": [
    "import json\n",
    "from streamlit_echarts import Map\n",
    "from streamlit_echarts import JsCode\n",
    "import streamlit as st\n",
    "from streamlit_echarts import st_echarts\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from streamlit_echarts import st_pyecharts\n",
    "from pyecharts.charts import Line, Pie, Bar\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "from PIL import Image\n",
    "\n",
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")\n",
    "a.sales=a.sales.str.replace(\"人付款\",\"\").astype(int)\n",
    "#求出各个商品的销售额并把它并入到原始数据框中去\n",
    "z1=a.sales*a.price\n",
    "z1.name=\"xse\"\n",
    "a=pd.concat([a,z1],axis=1)#给序列命名之后添加入数据框就会直接以序列名作为列标\n",
    "location=a.location.str.split(\" \",expand=True)\n",
    "a[\"province\"]=location[0]\n",
    "a[\"city\"]=location[1]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "8324b2e8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['_id.$oid', 'info.上市年份季节', 'info.上市时间', 'info.产品名称', 'info.低帮鞋品名',\n",
       "       'info.功能', 'info.吊牌价', 'info.品牌', 'info.图案', 'info.场合', 'info.外底材料',\n",
       "       'info.季节', 'info.尺码', 'info.帮面内里材质', 'info.帮面材质', 'info.性别',\n",
       "       'info.是否商场同款', 'info.是否瑕疵', 'info.款号', 'info.款式', 'info.流行元素',\n",
       "       'info.真皮材质工艺', 'info.细分风格', 'info.货号', 'info.跟底款式', 'info.运动系列',\n",
       "       'info.运动鞋科技', 'info.适合路面', 'info.适用对象', 'info.销售渠道类型', 'info.闭合方式',\n",
       "       'info.靴子品名', 'info.靴筒内里材质', 'info.靴筒材质', 'info.靴筒高度', 'info.鞋制作工艺',\n",
       "       'info.鞋垫材质', 'info.鞋头款式', 'info.鞋底材质', 'info.鞋码', 'info.鞋跟高',\n",
       "       'info.鞋面内里材质', 'info.鞋面材质', 'info.颜色分类', 'info.风格', 'itemid',\n",
       "       'location', 'nick', 'price', 'sales', 'title', 'url', 'xse', 'province',\n",
       "       'city'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.columns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "1a6c50a2",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>itemid</th>\n",
       "      <th>info.鞋面材质</th>\n",
       "      <th>info.风格</th>\n",
       "      <th>location</th>\n",
       "      <th>nick</th>\n",
       "      <th>price</th>\n",
       "      <th>sales</th>\n",
       "      <th>xse</th>\n",
       "      <th>province</th>\n",
       "      <th>city</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>562121114807</td>\n",
       "      <td>头层牛皮（除牛反绒）</td>\n",
       "      <td>商务</td>\n",
       "      <td>浙江 丽水</td>\n",
       "      <td>意尔康皮鞋旗舰店</td>\n",
       "      <td>269.0</td>\n",
       "      <td>1583</td>\n",
       "      <td>425827.0</td>\n",
       "      <td>浙江</td>\n",
       "      <td>丽水</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>545941839337</td>\n",
       "      <td>头层牛皮（除牛反绒）</td>\n",
       "      <td>商务</td>\n",
       "      <td>浙江 丽水</td>\n",
       "      <td>意尔康皮鞋旗舰店</td>\n",
       "      <td>199.0</td>\n",
       "      <td>1607</td>\n",
       "      <td>319793.0</td>\n",
       "      <td>浙江</td>\n",
       "      <td>丽水</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>563340844728</td>\n",
       "      <td>头层牛皮（除牛反绒）</td>\n",
       "      <td>商务</td>\n",
       "      <td>浙江 温州</td>\n",
       "      <td>吸引力xl</td>\n",
       "      <td>148.0</td>\n",
       "      <td>248</td>\n",
       "      <td>36704.0</td>\n",
       "      <td>浙江</td>\n",
       "      <td>温州</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>561684297836</td>\n",
       "      <td>头层牛皮（除牛反绒）</td>\n",
       "      <td>商务</td>\n",
       "      <td>浙江 温州</td>\n",
       "      <td>乙方乙方88888</td>\n",
       "      <td>158.0</td>\n",
       "      <td>195</td>\n",
       "      <td>30810.0</td>\n",
       "      <td>浙江</td>\n",
       "      <td>温州</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>555004335522</td>\n",
       "      <td>头层牛皮（除牛反绒）</td>\n",
       "      <td>休闲</td>\n",
       "      <td>浙江 丽水</td>\n",
       "      <td>意尔康男鞋旗舰店</td>\n",
       "      <td>279.0</td>\n",
       "      <td>37</td>\n",
       "      <td>10323.0</td>\n",
       "      <td>浙江</td>\n",
       "      <td>丽水</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "         itemid   info.鞋面材质 info.风格 location       nick  price  sales  \\\n",
       "0  562121114807  头层牛皮（除牛反绒）      商务    浙江 丽水   意尔康皮鞋旗舰店  269.0   1583   \n",
       "1  545941839337  头层牛皮（除牛反绒）      商务    浙江 丽水   意尔康皮鞋旗舰店  199.0   1607   \n",
       "2  563340844728  头层牛皮（除牛反绒）      商务    浙江 温州      吸引力xl  148.0    248   \n",
       "3  561684297836  头层牛皮（除牛反绒）      商务    浙江 温州  乙方乙方88888  158.0    195   \n",
       "4  555004335522  头层牛皮（除牛反绒）      休闲    浙江 丽水   意尔康男鞋旗舰店  279.0     37   \n",
       "\n",
       "        xse province city  \n",
       "0  425827.0       浙江   丽水  \n",
       "1  319793.0       浙江   丽水  \n",
       "2   36704.0       浙江   温州  \n",
       "3   30810.0       浙江   温州  \n",
       "4   10323.0       浙江   丽水  "
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a[['itemid','info.鞋面材质', 'info.风格','location', 'nick', 'price', 'sales','xse', 'province','city']].head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b526ce6f",
   "metadata": {},
   "outputs": [],
   "source": [
    "a[['price', 'sales','xse']]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2dc3cdef",
   "metadata": {},
   "source": [
    "### 在ppt中显示图表\n",
    "\n",
    "classwork 3\n",
    "\n",
    "* 利用下面的代码，改写第四,五页，注意通过st.markdown写上若干文字"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f24319a3",
   "metadata": {},
   "outputs": [],
   "source": [
    "option4 = st.multiselect(\n",
    "    'What are your favorite shopes',\n",
    "    a.groupby(\"nick\").size().sort_values(ascending=False).index,\n",
    "    ['意尔康男鞋旗舰店'])\n",
    "\n",
    "p1=a.groupby('info.鞋面材质').size().sort_values()\n",
    "p1.name=\"all\"\n",
    "\n",
    "chart0 = {\n",
    "  \"yAxis\": {\n",
    "    \"type\": 'category',\n",
    "    \"data\": p1.index.tolist()\n",
    "  },\n",
    "  \"xAxis\": {\n",
    "    \"type\": 'value'\n",
    "  },\n",
    "  \"legend\": {},\n",
    "  \"series\": [\n",
    "      {\n",
    "        \"data\": p1.values.tolist(),\n",
    "        \"type\": 'bar',\n",
    "        \"name\":\"all\"\n",
    "      },\n",
    "  ]\n",
    "}\n",
    "\n",
    "for i in option4:\n",
    "    p2=a[a[\"nick\"]==i].groupby('info.鞋面材质').size()\n",
    "    p2.name=i\n",
    "    p1=pd.concat([p1,p2],axis=1).fillna(0)\n",
    "    chart0[\"series\"].append({\n",
    "      \"data\": p1[i].values.tolist(),\n",
    "      \"type\": 'bar',\n",
    "      \"name\": i\n",
    "    })\n",
    "\n",
    "st_echarts(chart0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5c2a5088",
   "metadata": {},
   "outputs": [],
   "source": [
    "p1=a.groupby(\"info.鞋面材质\").size()\n",
    "\n",
    "option = {\n",
    "    \"xAxis\": {\n",
    "        \"type\": \"category\",\n",
    "        \"data\": p1.index.tolist(),\n",
    "    },\n",
    "    \"yAxis\": { \"type\": \"value\" },\n",
    "    \"series\": [\n",
    "        {\"data\": p1.values.tolist(), \"type\": \"bar\" }\n",
    "    ],\n",
    "}\n",
    "events = {\n",
    "    \"click\": \"function(params) { console.log(params.name); return params.name }\",\n",
    "    \"dblclick\":\"function(params) { return [params.type, params.name, params.value] }\"\n",
    "}\n",
    "value = st_echarts(option, events=events)\n",
    "\n",
    "if value:\n",
    "    p2=a[a[\"info.鞋面材质\"]==value].groupby(\"price\").size()\n",
    "    data=[]\n",
    "    for i in p2.items():\n",
    "        data.append(list(i))\n",
    "    option1 = {\n",
    "        \"xAxis\": {\n",
    "            \"min\":0,\n",
    "            \"max\":600\n",
    "        },\n",
    "        \"yAxis\": {\n",
    "            },\n",
    "        \"series\": [\n",
    "            {\"data\": data, \"type\": \"line\" }\n",
    "        ],\n",
    "    }\n",
    "    st_echarts(option1)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c1b7eb2e",
   "metadata": {},
   "source": [
    "## 增加翻页按钮\n",
    "\n",
    "* 增加一个按钮，点击则去下一页，注意页码范围\n",
    "\n",
    "* 增加去上一页的按钮，让两个按钮在内容的最下方"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "46521973",
   "metadata": {},
   "outputs": [],
   "source": [
    "if 'count' not in st.session_state:\n",
    "    st.session_state.count = 0\n",
    "\n",
    "st.write('Count = ', st.session_state.count)\n",
    "\n",
    "def increment_counter():\n",
    "    st.session_state.count += 1\n",
    "\n",
    "st.button('Increment', on_click=increment_counter)\n",
    "\n",
    "st.write('Count = ', st.session_state.count)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a929dfa7",
   "metadata": {},
   "source": [
    "## streamlit下的键盘监听\n",
    "\n",
    "### streamlit 下Components的使用\n",
    "\n",
    "https://docs.streamlit.io/library/components/components-api#stcomponentsv1html\n",
    "\n",
    "虽然 st.text、st.markdown 和 st.write 可以轻松地将文本写入 Streamlit 应用程序，但有时您更愿意实现一段自定义的 HTML。 同样，虽然 Streamlit 原生支持许多图表库，但您可能希望为新的图表库实现特定的 HTML/JavaScript 模板。 components.html 的工作原理是让您能够在包含所需输出的 Streamlit 应用程序中嵌入 对应的iframe。\n",
    "\n",
    "* 虽然简单的html代码可以通过markdown插入，但是如果设计到js，则需要st.components.v1.html，它明显比前者功能更强大，而且也是相对安全的"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "cd99e207",
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "2023-05-08 19:46:29.999 \n",
      "  \u001b[33m\u001b[1mWarning:\u001b[0m to view this Streamlit app on a browser, run it with the following\n",
      "  command:\n",
      "\n",
      "    streamlit run G:\\anaconda\\lib\\site-packages\\ipykernel_launcher.py [ARGUMENTS]\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "DeltaGenerator(_root_container=0, _provided_cursor=None, _parent=None, _block_type=None, _form_data=None)"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "import streamlit as st\n",
    "import streamlit.components.v1 as components\n",
    "\n",
    "# bootstrap 4 collapse example\n",
    "components.html(\n",
    "    \"\"\"\n",
    "    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css\" integrity=\"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm\" crossorigin=\"anonymous\">\n",
    "    <script src=\"https://code.jquery.com/jquery-3.2.1.slim.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"></script>\n",
    "    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\" integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\" crossorigin=\"anonymous\"></script>\n",
    "    <div id=\"accordion\">\n",
    "      <div class=\"card\">\n",
    "        <div class=\"card-header\" id=\"headingOne\">\n",
    "          <h5 class=\"mb-0\">\n",
    "            <button class=\"btn btn-link\" data-toggle=\"collapse\" data-target=\"#collapseOne\" aria-expanded=\"true\" aria-controls=\"collapseOne\">\n",
    "            Collapsible Group Item #1\n",
    "            </button>\n",
    "          </h5>\n",
    "        </div>\n",
    "        <div id=\"collapseOne\" class=\"collapse show\" aria-labelledby=\"headingOne\" data-parent=\"#accordion\">\n",
    "          <div class=\"card-body\">\n",
    "            Collapsible Group Item #1 content\n",
    "          </div>\n",
    "        </div>\n",
    "      </div>\n",
    "      <div class=\"card\">\n",
    "        <div class=\"card-header\" id=\"headingTwo\">\n",
    "          <h5 class=\"mb-0\">\n",
    "            <button class=\"btn btn-link collapsed\" data-toggle=\"collapse\" data-target=\"#collapseTwo\" aria-expanded=\"false\" aria-controls=\"collapseTwo\">\n",
    "            Collapsible Group Item #2\n",
    "            </button>\n",
    "          </h5>\n",
    "        </div>\n",
    "        <div id=\"collapseTwo\" class=\"collapse\" aria-labelledby=\"headingTwo\" data-parent=\"#accordion\">\n",
    "          <div class=\"card-body\">\n",
    "            Collapsible Group Item #2 content\n",
    "          </div>\n",
    "        </div>\n",
    "      </div>\n",
    "    </div>\n",
    "    \"\"\",\n",
    "    height=600,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "59137db8",
   "metadata": {},
   "source": [
    "### 键盘监听的js实现"
   ]
  },
  {
   "cell_type": "raw",
   "id": "886dd570",
   "metadata": {},
   "source": [
    "<script>\n",
    "const streamlitDoc = window.parent.document;\n",
    "\n",
    "const buttons = Array.from(streamlitDoc.querySelectorAll('.stButton > button'));\n",
    "//console.log(buttons) // find buttons in console tab\n",
    "\n",
    "const left_button = buttons.find(el => el.innerText === 'last page');\n",
    "const right_button = buttons.find(el => el.innerText === 'next page');\n",
    "\n",
    "left_button.style.backgroundColor = \"coral\"\n",
    "right_button.style.backgroundColor = \"lightblue\"\n",
    "\n",
    "streamlitDoc.addEventListener('keydown', function(e) {\n",
    "    switch (e.key) {\n",
    "        case 'ArrowLeft':\n",
    "            left_button.click();\n",
    "            break;\n",
    "        case 'ArrowRight':\n",
    "            right_button.click();\n",
    "            break;\n",
    "        case 'Enter':\n",
    "            window.parent.navigator.clipboard.writeText(python_string)\n",
    "            //window.parent.navigator.clipboard.readText().then((d) => {console.log(d)})\n",
    "    }\n",
    "});\n",
    "</script>"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2f6d23ed",
   "metadata": {},
   "source": [
    "* 请通过上述代码实现键盘控制演示文稿的翻页"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b43914d0",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.12"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {
    "height": "calc(100% - 180px)",
    "left": "10px",
    "top": "150px",
    "width": "192.818px"
   },
   "toc_section_display": true,
   "toc_window_display": true
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
